<template>
<div class="dashboard-container">
    <el-card>
        <div slot="header" class="clearfix">
            <span>代码示例</span>
        </div>
            <div class="filter-container">
            <el-input v-model="listQuery.demo_text" placeholder="请输入示例文本" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />
                <el-select v-model="listQuery.demo_select" filterable  placeholder="请选择示例下拉单选" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" >
                    <el-option  label="选项1" value="1"></el-option>
                    <el-option  label="选项2" value="2"></el-option>
                </el-select>
            <el-cascader
                size="large"
                :options="options"
                clearable
                filterable
                placeholder="选择地区"
                style="width: 200px;margin-right: 10px;"
                v-model="selectedOptions"
                @change="handleChange">
            </el-cascader>
            <el-date-picker v-model="listQuery.demo_date" type="daterange" value-format="yyyy-MM-dd"  style="width: 250px;margin-right: 10px;margin-bottom:10px" start-placeholder="开始日期"
                    end-placeholder="结束日期"  range-separator="/" placeholder="请选择示例日期"     @keyup.enter.native="handleFilter" />
            <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            {{ '搜索' }}
            </el-button>
                <el-button v-waves :disabled="!checkPermission(['demo.create'])"  class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                    {{ "添加" }}
            </el-button>
            <el-button v-waves :disabled="!checkPermission(['demo.delete'])" class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatch">
                {{ '批量删除' }}
            </el-button>
            <el-button v-waves :disabled="!checkPermission(['demo.export'])"  type="success" icon="el-icon-upload2" @click="handleExport">
                    {{ '导出' }}
                </el-button>
            <el-upload
                class="import"
                :action="import_url"
                accept=".csv"
                :headers ="headerObj"
                :before-upload="beforeImport"
                :on-success="handleImport"
                :show-file-list="false"
                >
                <el-button icon="el-icon-download" type="primary">导入</el-button>
            </el-upload>
        </div>
            <el-table
            
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="list"
            border
            fit
            @select="handleSelect"
            @select-all ="selectAll"
            highlight-current-row
            style="width: 100%"
            size="mini"
            >  
        
        <el-table-column align="center" type="selection" width="55"> </el-table-column>            
            <el-table-column  align="center" label="示例文本">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_text }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例数字">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_number }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例单选">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_radio }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例多选">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_chekbox }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例下拉单选">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_select }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例下拉多选">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_selects }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例单图">
            <template slot-scope="scope">
                <el-image   :preview-src-list="scope.row.demo_pic ? scope.row.demo_pic.split(',') : []" style="width: 50px; height: 50px" :src="scope.row.demo_pic" fit="cover"></el-image>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例多图">
            <template slot-scope="scope">
                <el-image style="width: 50px; height: 50px;margin-right:5px"  v-for="(item,ids) in scope.row.demo_pics.split(',')" :key="ids" :preview-src-list="scope.row.demo_pics.split(',')" :src="item" fit="cover"></el-image>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例视频">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_video }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例日期">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_date }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例时间">
            <template slot-scope="scope">
                <span>{{ scope.row.demo_time }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例日期范围">
            <template slot-scope="scope">
                <span>{{ scope.row.damo_range }}</span>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="示例开关">
            <template slot-scope="scope">
                    <el-switch v-model="scope.row.demo_switch" :active-value='1' :inactive-value='0' @change="switch_status(scope.row)"></el-switch>
            </template>
        </el-table-column>


            <el-table-column align="center" width="280" :label="'操作'">
            <template slot-scope="scope">
                <el-button v-waves :disabled="!checkPermission(['demo.detail'])" size='mini'  type="info" icon="el-icon-info" @click="handleDetail(scope.$index, scope.row)">
                    {{ "详情" }}
                </el-button>
                <el-button v-waves v-permission="['demo.edit']"  type="primary"  size='mini' icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                    {{ "编辑" }}
                </el-button>
                <el-button v-waves v-permission="['demo.delete']"  type="danger" :destroy-on-close="true" size='mini' icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">
                        {{ "删除" }}
                </el-button>
            </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>
        <el-dialog :title="'详情'" :visible.sync="detail.dialogVisible" v-if="detail.dialogVisible">
        <detail :data="detail.data" />
        </el-dialog>
        <el-dialog :title="'编辑'" :visible.sync="edit.dialogVisible" @close="getList" :close-on-click-modal=false>
        <edit :item="edit" />
        </el-dialog>
    <el-dialog :title="'添加'" :visible.sync="create.dialogVisible" @close="getList"  :close-on-click-modal=false>
        <create :item="create" />
    </el-dialog>
</div>
</template>
<style scoped>
    .import {
        display: inline-block;
        margin-left: 5px;
    }
</style>
<script>
    import {export_excell} from '@/api/export_excell' // 导出
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, detail, del ,edit} from '@/api/demo' // api接口
    import Detail from '@/components/Detail/detail' // 详情组件
    import Create from './components/create' // 添加组件
    import Edit from './components/edit' // 编辑组件
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件
    import { 
    provinceAndCityData, 
    regionData,
    provinceAndCityDataPlus, 
    regionDataPlus, 
    CodeToText, 
    TextToCode 
} from 'element-china-area-data'
    export default{
        name: 'demoIndex',
        components: { Pagination,Detail,Create,Edit }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
          data() {
            return {
             headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            options: regionDataPlus,
            selectedOptions:"",
            list: null, // 列表数据
            total: 0, // 总条数
            select_ids : [], // 选中的id集合
            // listLoading: true, //加载loadig
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
            },
         import_url: process.env.VUE_APP_BASE_API+'/admin/demo_import',
            create: { // 新增
                dialogVisible: false
            },
            detail: { // 详情
                dialogVisible: false,
                data: []
            },
            edit: { // 编辑
                dialogVisible: false,
                id: ''
            }
            }
        },
          created() {
            this.getList()
        },
        methods: {
            handleChange (value) {
            let province = CodeToText[value[0]],
                city = CodeToText[value[1]],    
                area = CodeToText[value[2]];
                this.listQuery.province = province !="全部" ? province : '';
                this.listQuery.city = city != "全部" ? city : '';
                this.listQuery.area = area != "全部" ? area : '';
        },
            beforeImport(){ //导入前回调 
                // this.listLoading = true;
            },
            switch_status(row){
                edit({id:row.id,'demo_switch':row.demo_switch}).then(res => {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                }).catch(err => {
                    this.$message.error(err.message);
                })
            },
            handleImport(res) { // 导入
                if(!res.code) {
                    this.$message.error(res.msg)
                    // this.listLoading = false;
                } else {
                    // this.listLoading = false;
                    this.$message.success(res.msg);
                    this.getList()
                }
            },
            handleSelect(selection, row) { // 选中
                 this.select_ids = [];
                selection.map(item => {
                     this.select_ids.push(item.id);
                })
            },
             selectAll(selection) { // 全选
                 this.select_ids = [];
                selection.map(item => {
                     this.select_ids.push(item.id);
                })
            },

            handleExport(){
                let query="";
                for ( let key in this.listQuery) {
                    query+= `${key}=${this.listQuery[key]}&`
                }
                window.location.href = process.env.VUE_APP_BASE_API + `admin/demo_export?${query}`;
            },
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
            handleCreate() { // 新增对话框显示
              this.create.dialogVisible = true
            },
            handleEdit(index, row) { // 编辑对话框显示
              this.edit.dialogVisible = true
              this.edit.id = row.id
            },
            handleBatch() {  // 批量删除
                var that = this;
                if(this.select_ids.length == 0){
                    this.$message({
                        message: '请选择要删除的数据',
                        type: 'warning'
                    });
                    return false;
                }
                this.$confirm('确认删除选中的数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(this.select_ids.join(',')).then(res => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getList();
                    }).catch(err => {
                        this.$message({
                            message: err.msg,
                            type: 'error'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleDelete(index, row) { // 删除
                    const thiz = this
                    this.$confirm('确认要删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        del(row.id).then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1500,
                            onClose() {
                                thiz.list.splice(index, 1)
                            }
                        })
                        })
                    }).catch(() => {

                    })
                },
            handleDetail(index, row) { // 详情
                detail(row.id).then((res) => {
                        this.detail.dialogVisible = true
                        const data = res.data
                        this.detail.data = [
                                          {
                    name:"示例文本",
                    content:data.demo_text,
                    type: "text"
                },
                {
                    name:"示例数字",
                    content:data.demo_number,
                    type: "text"
                },
                {
                    name:"示例单选",
                    content:data.demo_radio,
                    type: "text"
                },
                {
                    name:"示例多选",
                    content:data.demo_chekbox,
                    type: "text"
                },
                {
                    name:"示例下拉单选",
                    content:data.demo_select,
                    type: "text"
                },
                {
                    name:"示例下拉多选",
                    content:data.demo_selects,
                    type: "text"
                },
                {
                    name:"示例单图",
                    content:data.demo_pic,
                    type: "image"
                },
                {
                    name:"示例多图",
                    content:data.demo_pics.split(","),
                    type: "images"
                },
                {
                    name:"示例视频",
                    content:data.demo_video,
                    type: "video"
                },
                {
                    name:"示例富文本",
                    content:data.demo_intro,
                    type: "html"
                },
                {
                    name:"示例日期",
                    content:data.demo_date,
                    type: "text"
                },
                {
                    name:"示例时间",
                    content:data.demo_time,
                    type: "text"
                },
                {
                    name:"示例日期范围",
                    content:data.damo_range,
                    type: "text"
                },
                {
                    name:"示例开关",
                    content:data.demo_switch,
                    type: "switch"
                },

                        ]
                    })
                    },
            getList() { // 获取列表
                // this.listLoading = true
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        // this.listLoading = false
                    })
                },
            }
    }
</script>

